<template>
  <div class="main_right column-flex">
    <!-- 应用安全 -->
    <div class="box right-module-top">
      <!-- 标题 -->
      <h1 class="left-title">事件处置状态</h1>
      <el-select
        class="select-box"
        size="mini"
        clearable
        v-model="tagCode"
        placeholder="请选择"
        @change="handleChangeTag"
      >
        <el-option
          v-for="item in statusOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div
        class="flex module-top-wk"
        @mouseover="handleMouseover"
        @mouseleave="handleMouseLeave"
      >
        <pieEcharts ref="pieEchartRef" @handlePieClick="handlePieClick" />
      </div>
    </div>
    <div class="box right-module-middle">
      <!-- 标题 -->
      <h1 class="left-title">事件成因分析</h1>
      <!-- <p class="left-subtitle">最后更新时间: {{ newTime }}</p> -->
      <div class="flex module-top-wk">
        <behaviorEcharts
          ref="behaviorEchartsRef"
          height="90%"
          :sizeRange="[15, 30]"
        ></behaviorEcharts>
      </div>
    </div>
    <!-- 安全运维 -->
    <div class="box right-module-bottom">
      <h1 class="left-title" style="margin-bottom:0;">响应处置概览</h1>
      <div class="flex module-top-wk">
        <disposalList
          v-if="disposalList.length > 0"
          :lists="disposalList"
          @handleClick="handleTableClick"
        />
        <div class="empty-box flex" v-else>暂无数据</div>
      </div>
    </div>
    <!--  二级弹窗   -->
    <searchDialog
      ref="safeConcernsDialogRef"
      :searchFormObj="imgFormObj"
      title="事件列表"
      :tableList="imgTableData.imgTableList"
      :tableData="imgTableData.tableData"
      :total="imgTableData.total"
      :operate-open="true"
      @getTableList="getsafeConcernTableList"
      @operateEvent="operateEvent"
    ></searchDialog>
  </div>
</template>

<script>
import ShowTotal from "@/components/common/ShowTotal.vue";
import BorderList from "@/components/common/BorderList";
import BorderTopList from "@/components/common/BorderTopList";
import behaviorEcharts from "@/components/echarts/userbehavior/behaviorEcharts.vue";
import pieEcharts from "@/components/echarts/confidentialitySupervision/3dpieEcharts.vue";
import {
  disposalCount,
  groupTag,
  eventCause,
  disposal,
  eventList,
} from "@/api/confidentialitySupervision.js";
import disposalList from "@/components/assets/disposalList.vue";
import { parseTime } from "@/utils/hongke";
import CycleComponent from "@/components/common/cycleComponent.vue";
import { cloneDeep } from "@/utils/loadash-es";
import obj from "@/components/index/comprehensiveSituation/components/tableData";
import { mapState } from "vuex";
import searchDialog from "@/components/common/searchDialog";

export default {
  components: {
    ShowTotal,
    BorderList,
    BorderTopList,
    behaviorEcharts,
    pieEcharts,
    disposalList,
    searchDialog,
    CycleComponent,
  },

  data() {
    return {
      statusOption: [],
      tagCode: "",
      tagGrop: "",
      queryParams: {},
      pieData: [],
      newTime: "",
      disposalList: [],
      imgFormObj: {
        fieldList: cloneDeep(obj.imgFormObj.fieldList),
        searchData: {},
        btnHidden: true,
        listTypeInfo: {
          levelCodeList: this.$store.state.levelCodeList,
          categoryCodeList: this.$store.state.categoryCodeList,
          typeCodeList: this.$store.state.typeCodeList,
          protectCodeList: this.$store.state.protectCodeList,
        },
        //  是否有额外的参数
        isNeedResetExtraParam: false,
      },
      imgTableData: {
        imgTableList: cloneDeep(obj.imgTableList),
        tableData: [],
        total: 0,
      },
      eventmanagement_status_timer: null,
    };
  },
  computed: {
    ...mapState([
      "levelCodeList",
      "typeCodeList",
      "categoryCodeList",
      "protectCodeList",
      "searchType",
      "time"
    ]),
  },
  watch: {
    time:{
      handler(val) {
        if(val && val[0]){
          this.queryParams.searchType=this.$store.state.searchType!='custom'?this.$store.state.searchType:null;
          if(this.$store.state.searchType!='custom'){
            this.queryParams.time=null
          }else{
            this.queryParams.time=this.$store.state.time
          }
        this.getDisposalCount();
        this.getEventCause();
        this.getDictStatus();
        this.getNewTime();
        this.getDisposal();
        }
      },
      immediate: true,
      deep: true,
    },
    levelCodeList: {
      handler(val) {
        this.imgFormObj.listTypeInfo.levelCodeList = val;
      },
      immediate: true,
      deep: true,
    },
    typeCodeList: {
      handler(val) {
        this.imgFormObj.listTypeInfo.typeCodeList = val;
      },
      immediate: true,
      deep: true,
    },
    categoryCodeList: {
      handler(val) {
        this.imgFormObj.listTypeInfo.categoryCodeList = val;
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.dataLoop();
  },
  methods: {
    getNewTime() {
      let now = new Date();
      let yesterday = now.setTime(now.getTime() - 3600 * 1000 * 24 * 1);
      this.newTime = parseTime(yesterday);
    },
    /**   事件处置状态    */
    getDisposalCount() {
      if (this.tagCode != "") {
        let currentTag = this.statusOption.filter((i) => {
          return i.value == this.tagCode;
        });
        this.tagGrop = currentTag[0].groupCode;
      }
      disposalCount(
        Object.assign(
          { tagCode: this.tagCode, tagGroup: this.tagGrop },
          this.queryParams
        )
      ).then((res) => {
        this.pieData = res.statusList;
        this.$refs.pieEchartRef.getData(this.pieData);
      });
    },
    /** 事件成因 */
    getEventCause() {
      eventCause(
        Object.assign({ search: "incidentEventCause" }, this.queryParams)
      ).then((res) => {
        if (res.length > 0) {
          let result = res.map((i) => {
            return { name: i.name, value: i.count };
          });
          this.$refs.behaviorEchartsRef.getData(result);
        }
      });
    },
    /**  获取响应处置概览 */
    getDisposal() {
      disposal(this.queryParams).then((res) => {
        this.disposalList = res.length>15?res.slice(0,15):res;
      });
    },
    /**  获取事件处置的下拉数据 */
    getDictStatus() {
      groupTag({ groupType: "event_level" }).then((res) => {
        this.statusOption = res.map((i) => {
          return {
            label: i.normalName,
            value: i.normalCode,
            groupCode: i.groupCode,
          };
        });
      });
    },
    /** 触发下拉框事件 */
    handleChangeTag() {
      this.getDisposalCount();
    },
    /** 饼状图-显示弹窗 */
    handlePieClick(param) {
      let code = param == "未处置" ? "0" : "1";
      this.queryEventList({
        disposalStatus: code,
        levelCode: this.tagCode ? this.tagCode : undefined,
        ...this.queryParams,
      });
      this.imgFormObj.searchData = {
        disposalStatus: code,
        levelCode: this.tagCode ? this.tagCode : undefined,
        ...this.queryParams,
      };
      setTimeout(() => {
        this.$refs.safeConcernsDialogRef.open = true;
      }, 500);
    },
    /** 列表查询 */
    queryEventList(query) {
      eventList(query).then((res) => {
        this.imgTableData.total = res.total;
        this.imgTableData.tableData = res.list;
      });
    },
    /***  弹窗搜索 */
    getsafeConcernTableList(data) {
      if (data?.time) {
        data.time.forEach((i, index) => {
          data.time[index] = parseTime(i, "{y}-{m}-{d}T{h}:{i}:{s}");
        });
      }
      this.queryEventList(data);
    },
    /** 点击右下角响应处置概览 */
    handleTableClick(param) {
      this.queryEventList({
        eventCode: param.eventCode,
        ...this.queryParams,
        disposalStatus: "0",
      });
      this.imgFormObj.searchData = {
        eventCode: param.eventCode,
        ...this.queryParams,
        disposalStatus: "0",
      };
      setTimeout(() => {
        this.$refs.safeConcernsDialogRef.open = true;
      }, 500);
    },
    /**  事件处置状态---弹窗详情 */
    operateEvent(val) {
      window.open(
        window.urlPrefix + "dispose/incidentHandle/detail?showBack=false&ids=" + val.row.id
      );
    },
    /** 循环 */
    dataLoop() {
      this.eventmanagement_status_timer = setInterval(() => {
        let valueArr = this.statusOption.map((i) => {
          return i.value;
        });
        switch (this.tagCode) {
          case "":
            this.tagCode = valueArr[0];
            break;
          case valueArr[0]:
            this.tagCode = valueArr[1];
            break;
          case valueArr[1]:
            this.tagCode = valueArr[2];
            break;
          case valueArr[2]:
            this.tagCode = valueArr[3];
            break;
          case valueArr[3]:
            this.tagCode = valueArr[0];
            break;
        }
        this.handleChangeTag();
      }, 20000);
    },
    handleMouseover() {
      clearInterval(this.eventmanagement_status_timer);
    },
    handleMouseLeave() {
      this.dataLoop();
    },
  },
  destroyed() {
    clearInterval(this.eventmanagement_status_timer);
  },
};
</script>

<style lang="scss" scoped>
.matters {
  display: flex;
  justify-content: space-between;

  & > div {
    width: 260px;
    padding: 15px 25px;
    border: 1px solid #152f8d;
    border-radius: 2px;
    text-align-last: left;

    span {
      margin-right: 10px;
      color: #ff3535;
      font-size: 20px;
      font-weight: 500;
    }
  }
}

.left-subtitle {
  font-size:1.2rem;
  text-align: left;
  color: #3b8afe;
}

.module-top-wk {
  display: flex;
  height: 92%;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.right-module-top {
  height: 33%;
  width: 100%;
  position: relative;

  .select-box {
    position: absolute;
    top: 1rem;
    right: 1rem;
  }
}

.right-module-middle {
  height: 31%;
}

.right-module-bottom {
  height: 32%;
}

.module-top-t {
  margin-top: 0.8rem;

  img {
    width: 30%;
    margin-right: 1rem;
  }

  .section-dec {
    flex: 1;
    margin-left: 0.8rem;

    p {
      text-align: left;
    }
  }
}

.module-top-m {
  height: 42%;
}

.module-top-m,
.module-top-b {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

::v-deep .border-list-wk {
  width: 30%;
}

.empty-box {
  height: 100%;
  text-align: center;
}
</style>
